<script setup>
import {ref} from "vue";
import {onLoad, onUnload} from "@dcloudio/uni-app";
import {checkOrderPicAPI, orderDetailsAPI, submitOrderAPI} from "../services/order";
import {BaseImgUrl, BaseURL} from "../utils/lshttp";
import {useOrderInfoStore} from "../stores/modules/orderInfo";
import {conUtils} from "../utils/conUtils";
import {toAppletPage} from "../utils/utils";
// #ifdef H5
import {useCommonInfoStore} from "../stores/modules/commonInfo";
import CacheImage from "../components/CacheImage.vue";

const commonInfoStore = useCommonInfoStore()
// #endif
const orderInfoStore = useOrderInfoStore()
const orderDetail = ref({
  shop: {
    type: ''
  }
})
const submitData = ref({
  order_id: '',
  user_pay_img: '',
  user_order_img: '',
  user_comment_img: '',
  is_abnormal: 0,
  user_pay_order_no: '',
  user_pay_amount: '',
  user_pay_time: '',
  shop_name: '',
  text1: "",
  text2: "",
  comment_time: ''
})
const order_is_abnormal = ref(0)
const shop_is_abnormal = ref(0)
const comment_is_abnormal = ref(0)
const banner_imgs = ref([])
const showGetTip = ref()

const imgs1 = ref()
const imgs2 = ref()
const imgs3 = ref()
const elmurl1 = ref('') //订单路径
const elmurl2 = ref('') //评价路径
// 美团订单检测转人工变量
const WebView = ref('')
onLoad((options) => {
  // #ifdef H5
  commonInfoStore.initJSDKConfig()
  // #endif
  if (options.orderID) {
    handleShopDetail(options.orderID)
  }
  if (options.WebView){
    WebView.value = options.WebView
  }
})

// 获取订单详情
const handleShopDetail = async (id) => {
  const res = await orderDetailsAPI(id)
  console.log('res', res.result)
  orderDetail.value = res.result
  if (orderDetail.value.shop.type === 1) { //跳转美团
    elmurl1.value = 'pages/orders/orders';
    elmurl2.value = 'sub_inner_pages/evaluate-list/evaluate-list';
  }
  if (orderDetail.value.shop.type === 2) { //跳转饿了么
    elmurl1.value = 'pages/orderlist/pages/index/index';
    elmurl2.value = 'ele-evaluate-order/pages/ele-evaluate-center/ele-evaluate-center?spm=a2ogi.24574003.undefined&startTime=1686740013208';
  }
  submitData.value.order_id = res.result.id
  submitData.value.user_comment_img = res.result.user_comment_img
  submitData.value.user_order_img = res.result.user_order_img
  submitData.value.user_pay_img = res.result.user_pay_img
  submitData.value.user_pay_time = res.result.user_pay_time
  submitData.value.user_pay_order_no = res.result.user_pay_order_no
  submitData.value.shop_name = res.result.shop_name
  submitData.value.user_pay_amount = res.result.user_pay_amount
  imgs1.value = res.result.user_pay_img
  imgs2.value = res.result.user_order_img
  imgs3.value = res.result.user_comment_img
  banner_imgs.value = [res.result.example_comment_img, res.result.example_order_img, res.result.example_pay_img]
}
// 取消上传某张图片
const handleCloseImg = async (status) => {
  if (status === 1) {
    imgs1.value = ''
    submitData.value.user_pay_order_no = ''
    submitData.value.user_pay_time = ''
    submitData.value.user_pay_img = ''
  }
  if (status === 2) {
    imgs2.value = ''
    submitData.value.shop_name = ''
    submitData.value.user_pay_amount = ''
    submitData.value.user_order_img = ''
  }
  if (status === 3) {
    imgs3.value = ''
    submitData.value.user_comment_img = ''
  }
}
const showImage = (imgPth) => {
  conUtils("showImage", imgPth)
  uni.previewImage({
    urls: imgPth,
  })
}
// 上传截图
const uploadImg = (type) => {
  conUtils("uploadImg", uploadImg)
  let imgList = []
  switch (type) {
    case 0:
      // 上传识别订单号和付款时间
      if (imgs1.value) {
        imgList.push(imgs1.value)
        showImage(imgList)
        return
      }
      break;
    case 1:
      // 上传店铺名和实付金额
      if (imgs2.value) {
        imgList.push(imgs2.value)
        showImage(imgList)
        return
      }
      break;
    case 2:
      // 上传评论
      if (imgs3.value) {
        imgList.push(imgs3.value)
        showImage(imgList)
        return
      }
      break;
  }
  uni.chooseImage({
    count: 1,
    // 默认9
    sizeType: ['original', 'compressed'],
    // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'],
    // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths = res.tempFilePaths;
      uni.showLoading({
        title: '上传中'
      })
      uni.uploadFile({
        url: BaseURL + (type === 2 ? '/api/order/ocrFiveStarPraise' : '/api/order/upload'),
        method: 'POST',
        filePath: tempFilePaths[0],
        formData: {
          order_id: orderDetail.value.id
        },
        name: 'file',
        success(res1) {
          conUtils("res1", res1)
          let data = JSON.parse(res1.data)
          // 订单截图
          if (type === 0 || type === 1) {
            uni.showToast({title: data.msg, icon: "none"})
            if (type === 0) {
              imgs1.value = data.result.show_path
              submitData.value.user_pay_img = data.result.path
              submitData.value.text1 = data.result.text
            } else if (type === 1) {
              imgs2.value = data.result.show_path
              submitData.value.user_order_img = data.result.path
              submitData.value.text2 = data.result.text
            }
            if (data.result.pay_time) {
              submitData.value.user_pay_time = data.result.pay_time
            }
            if (data.result.order_no) {
              submitData.value.user_pay_order_no = data.result.order_no
            }
            if (data.result.shop_name) {
              submitData.value.shop_name = data.result.shop_name
            }
            if (data.result.pay_amount) {
              submitData.value.user_pay_amount = data.result.pay_amount
            }
          } else {
            // 评价截图
            imgs3.value = data.result?.show_path
            submitData.value.user_comment_img = data.result?.path
            submitData.value.comment_time = data.result?.comment_time
            if (data.status !== 1) {
              order_is_abnormal.value = 1
              uni.showModal({
                title: data.result.title,
                content: data.result.sub_title,
                confirmText: '图片无误',
                cancelText: '重新上传',
                success(request) {
                  if (request.cancel) {
                    imgs3.value = ''
                    submitData.value.user_comment_img = ''
                  }
                }
              })
            } else {
              uni.showToast({title: data.msg, icon: "none"})
            }
          }
        }, fail(e) {
          uni.showToast({title: "上传失败" + JSON.stringify(e), icon: "none"})
        }, complete() {
          uni.hideLoading()
        }
      })
    }
  });
}

//提交评论
const orderMsg = async () => {
  if (order_is_abnormal.value || shop_is_abnormal.value || comment_is_abnormal.value) {
    submitData.value.is_abnormal = 1
  } else {
    submitData.value.is_abnormal = 0
  }
  if (orderDetail.value.check_status > 2) {
    if (!submitData.value.user_pay_order_no) {
      await uni.showToast({title: "识别失败，请输入订单号", icon: "none"})
      return
    }
    if (!submitData.value.user_pay_amount) {
      await uni.showToast({title: "识别失败，请输入实付金额", icon: "none"})
      return
    }
    if (!submitData.value.user_pay_img) {
      await uni.showToast({
        title: '请上传截图',
        icon: 'none'
      })
      return
    }
  }
  try {
    await checkOrderPicAPI(submitData.value)
  } catch (e) {
    uni.showModal({
      title: e.data.result.title,
      content: e.data.result.sub_title + "，如果您上传的图片无误，请点击继续上传！",
      confirmText: '继续上传',
      cancelText: '我再看看',
      success(request) {
        submitData.value.is_abnormal = 1
        if (request.confirm) {
          submit()
        }
      }
    })
    return
  }
  orderInfoStore.setIsRefresh(true)
  uni.showToast({
    title: '上传成功',
    icon: 'none',
    duration: 2600,
    mask: true,
    success: function () {
      setTimeout(function () {
        uni.navigateBack();
      }, 2600);
    }
  });
}
const submit = async () => {
  await submitOrderAPI(submitData.value)
  orderInfoStore.setIsRefresh(true)
  uni.showToast({
    title: '上传成功',
    icon: 'none',
    duration: 2600,
    mask: true,
    success: function () {
      setTimeout(function () {
        uni.navigateBack();
      }, 2600);
    }
  });
}
const mtOrderUrl = 'pages/orders/orders'
const mtEvaluateUrl = 'sub_inner_pages/evaluate-list/evaluate-list'
const mtAppletId = 'wx2c348cf579062e56'
const mtAppId = 'gh_72a4eb2d4324'
const elmOrderUrl = 'pages/orderlist/pages/index/index'
const elmEvaluateUrl = 'ele-evaluate-order/pages/ele-evaluate-center/ele-evaluate-center.html?spm=a2ogi.24574003.undefined&startTime=1701940975746'
const elmAppletId = 'wxece3a9a4c82f58c9'
const elmAppId = 'gh_6506303a12bb'
const jdOrderUrl = 'pages/order/list/index'
const jdEvaluateUrl = 'pages/order/list/index'
const jdAppletId = 'wx91d27dbf599dff74'
const jdAppId = 'gh_45b306365c3d'

const jietu = (type) => {
  /* if (orderDetail.value.shop.type === 3 && type !== 1) {
    showGetTip.value = true
    return
  } */
  toAppletPage(orderDetail.value.shop.type, type)
}
const previewImage = (e) => {
  const current = e.currentTarget.dataset.src;
  uni.previewImage({
    current: current,
    // 当前显示图片的http链接
    urls: banner_imgs.value // 需要预览的图片http链接列表
  });
}
// 通过不同页面进入返回对应的页面
const goBack = () => {
  if (WebView.value){
    uni.reLaunch({url: '/pages/order/order'})
  }else {
    uni.navigateBack()
  }
}
</script>

<template>
  <u-navbar
      title="上传订单凭证"
      placeholder
      titleStyle="color:black"
      leftIconColor="#000"
      auto-back
      @leftClick="goBack"
  >
  </u-navbar>
  <form @submit="orderMsg">
    <view class="voucher_cont" v-if="orderDetail.check_status > 2">
      <view class="orderVoucher">
        <view class="qujietu">
          <view style="display: flex;align-items: center;margin-bottom: 20rpx;">
            <view>上传订单凭证</view>
            <view class="notes" style="margin-left: 20rpx">请按照提示框正确上传</view>
          </view>
          <view @tap="jietu(1)" style="text-align: center;position: relative">
            <!-- #ifdef H5 -->
            <wx-open-launch-weapp id="launch-btn"
                                  :username="orderDetail.shop.type == 1 ? mtAppId : orderDetail.shop.type == 2 ? elmAppId : jdAppId"
                                  :path="orderDetail.shop.type == 1 ? mtOrderUrl : orderDetail.shop.type == 2 ? elmOrderUrl : jdOrderUrl"
                                  style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
              <component :is="'script'" type='text/wxtag-template' style="display: block;">
                <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
              </component>
            </wx-open-launch-weapp>
            <!-- #endif -->
            <view class="btn-open-weapp" style="color: #666666;font-size: 26rpx">
              去截图
              <image style="width: 22rpx;height: 22rpx;margin-left: 2rpx"
                     :src="BaseImgUrl + '/once/right.png'"></image>
            </view>
          </view>
        </view>

        <view class="notesImg">
          <!-- 1 -->
          <view class="imgs_box">
            <view class="small_box">
              <view class="text">订单号和下单时间</view>
              <image @tap="uploadImg(0)" :src="imgs1?imgs1:BaseImgUrl + '/images/notes.png'"></image>
              <view class="close_icon" v-if="imgs1" @click="handleCloseImg(1)">
                <image :src="BaseImgUrl + '/images/close.png'"></image>
              </view>
            </view>
            <view class="small_box">
              <view class="text">店铺名和实付金额</view>
              <image @tap="uploadImg(1)" :src="imgs2?imgs2:BaseImgUrl + '/images/notes.png'"></image>
              <view class="close_icon" v-if="imgs2" @click="handleCloseImg(2)">
                <image :src="BaseImgUrl + '/images/close.png'"></image>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>

    <!-- 评价截图 -->
    <view class="voucher_cont" v-if="orderDetail.check_status !== 2 && orderDetail.check_status !== 4">
      <view class="appraise">
        <view class="qujietu">
          <view>评价截图</view>
          <view @tap="jietu(2)" style="text-align: center;">
            <!-- #ifdef H5 -->
            <wx-open-launch-weapp id="launch-btn"
                                  :username="orderDetail.shop.type == 1 ? mtAppId : orderDetail.shop.type == 2 ? elmAppId : jdAppId"
                                  :path="orderDetail.shop.type == 1 ? mtEvaluateUrl : orderDetail.shop.type == 2 ? elmEvaluateUrl : jdEvaluateUrl"
                                  style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity:0.01;background-color: #ff531a">
              <component :is="'script'" type='text/wxtag-template' style="display: block;">
                <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
              </component>
            </wx-open-launch-weapp>
            <!-- #endif -->
            <view class="btn-open-weapp" style="color: #666666;font-size: 26rpx">
              去截图
              <image style="width: 22rpx;height: 22rpx;margin-left: 2rpx"
                     :src="BaseImgUrl + '/once/right.png'"></image>
            </view>
          </view>
        </view>

        <view class="notes" style="margin-top: 10rpx">注：{{ orderDetail.shop_activity_ask }}</view>
        <view class="appraiseImg" style="margin-top: 20rpx">
          <image style="border-radius: 20rpx" @tap="uploadImg(2)"
                 :src="imgs3?imgs3:BaseImgUrl + '/images/notes.png'"></image>
          <view class="close_icon" v-if="imgs3" @click="handleCloseImg(3)">
            <image :src="BaseImgUrl + '/images/close.png'"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="voucher_cont" v-if="orderDetail.check_status > 2">
      <!--<view class="voucher_list">-->
      <!--	<text>商家名称</text>-->
      <!--	<input type="text" :value="(orderDetail.type==1?'(美团)':'(饿了么)') + '' + orderDetail.shop_name" placeholder-class="classVoucher">-->
      <!--</view>-->
      <view class="voucher_list">
        <text>订单编号</text>
        <input type="text" name="order_sn" v-model="submitData.user_pay_order_no"
               placeholder="请输入订单编号: 订单号上传图片后自动识别"
               placeholder-class="classVoucher">
      </view>
      <view class="voucher_list">
        <text>支付金额</text>
        <input type="text" name="pay_num" v-model="submitData.user_pay_amount"
               placeholder="请输入支付金额: 支付金额上传图片后自动识别"
               placeholder-class="classVoucher">
      </view>

    </view>
    <!-- 上传凭证 -->
    <button class="submint" form-type="submit">上传凭证</button>
    <!-- 示例 -->
    <view class="lieZi">
      <view>
        <view class="pz_eg">
          <image class="little_left" :src="BaseImgUrl + '/images/little_left.png'"></image>
          <text>评价截图示例</text>
          <image class="little_right" :src="BaseImgUrl + '/images/little_right.png'"></image>
        </view>
        <view class="img_box">
          <image class="comment_img" :src="orderDetail.example_comment_img" mode="widthFix" @tap="previewImage"
                 :data-src="orderDetail.example_comment_img"></image>
        </view>
      </view>
      <view>
        <view class="pz_eg">
          <image class="little_left" :src="BaseImgUrl + '/images/little_left.png'"></image>
          <text>订单凭证示例</text>
          <image class="little_right" :src="BaseImgUrl + '/images/little_right.png'"></image>
        </view>
        <view class="img_box">
          <image class="comment_img" :src="orderDetail.example_order_img" mode="widthFix" @tap="previewImage"
                 :data-src="orderDetail.example_order_img"></image>
          <image class="comment_img" :src="orderDetail.example_pay_img" mode="widthFix" @tap="previewImage"
                 :data-src="orderDetail.example_pay_img"></image>
        </view>
      </view>
    </view>
  </form>
  <u-popup :show="showGetTip" mode="center" :round="10" width="680rpx" closeable @close="showGetTip = false">
    <view style="text-align: center;margin-top: 30rpx;font-weight: bold;font-size: 28rpx">如何获取京东评价截图</view>
    <view style="margin: 20rpx;font-size: 26rpx">京东外卖评价截图仅APP提供，请到京东APP截图~</view>
    <view class="popup_box1">
      <cache-image src="https://lsz.lszbg.com/imgs/bonus/jd_tip.png"
                   style="width: 710rpx;height: 460rpx;"></cache-image>
    </view>
    <view style="margin:20rpx 50rpx 30rpx;display: flex">
      <up-button
          @tap="showGetTip = false"
          text="我知道了"
          color="#fd980e"
          size="normal"
          shape="circle"
      ></up-button>
    </view>
  </u-popup>
</template>
<style>
page {
  background-color: #F6F6F6;
}
</style>
<style lang="scss">
.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FDE52F, #FDE52F);
}

.open_weapp {
  position: absolute;
  right: 4px;
  z-index: 999;
  top: -7px;
}

.voucher_cont {
  //min-height: 504rpx;
  padding: 28rpx;
  box-sizing: border-box;
  margin: 20rpx;
  background: #fff;
  border-radius: 10px;
}

.voucher_list {
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #ebeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.voucher_list:last-child {
  border-bottom: 0 solid #ebeaea;
}

.voucher_list text {
  //width: 30%;
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
}

.voucher_list input {
  flex: 1;
  height: 100%;
  padding: 0 10rpx;
  box-sizing: border-box;
  text-align: right;
  font-size: 28rpx;
}

.classVoucher {
  font-size: 26rpx;
  color: #999;
}

.orderVoucher {
  overflow: hidden;
  position: relative;
}

.orderVoucher text,
.appraise > text {
  position: relative;
  display: block;
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
  padding-top: 24rpx;
  box-sizing: border-box;
  line-height: 46rpx;
}

.notes,
.appraise .notes {
  font-size: 24rpx;
  color: #F66C3F;
  box-sizing: border-box;
}

.qujietu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;

  view:nth-child(1) {
    font-size: 28rpx;
    color: #222;
    font-weight: bold;
    box-sizing: border-box;
  }
}

.notesImg {
  width: 100%;
  min-height: 160rpx;
}

.notesImg .small_box {
  display: inline-block;
  padding-bottom: 20rpx;
  box-sizing: border-box;
  margin-right: 40rpx;
  text-align: center;
  position: relative;

  & .text {
    font-size: 24rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: red;
  }

  & .close_icon {
    position: absolute;
    top: 45rpx;
    right: 10rpx;
    width: 30rpx;
    height: 30rpx;
    opacity: .7;

    image {
      width: 100%;
      height: 100%;
    }
  }

}

.notesImg .small_box image {
  display: inline-block;
  width: 160rpx;
  height: 160rpx;
  margin: 0 20rpx 20rpx 0;
  border-radius: 10px;
}

/* 评价截图 */
.appraise {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10rpx;
  position: relative;
  background: #fff;
  border-radius: 25px;
  margin-bottom: 20px;
}

.appraiseImg {
  height: auto;
  position: relative;
  display: inline-block;
  margin-top: 10rpx;

  & .text {
    font-size: 24rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  & .close_icon {
    position: absolute;
    top: -10rpx;
    right: 5rpx;
    width: 30rpx;
    height: 30rpx;
    opacity: .7;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.appraiseImg image {
  width: 160rpx;
  height: 160rpx;
  margin: 0 20rpx 20rpx 0;
}

/* 上传凭证 */
.submint {
  margin: 27rpx auto;
  width: 690rpx !important;
  height: 80rpx;
  font-size: 32rpx;
  color: #fff;
  border-radius: 40rpx;
  background: linear-gradient(90deg, #fc605b, #fb9360);
}

/* 示例 */
.lieZi {
  width: 100%;
  height: auto;
  padding-bottom: 100rpx;
}

.lieZi > view {
  height: auto;
  text-align: center;
  background-color: white;
  padding: 20rpx 0;
  border-radius: 10px;
  margin: 10px;
}

.lieZi view > .pz_eg {
  display: flex;
  font-size: 32rpx;
  line-height: 28rpx;
  text-align: center;
  color: rgba(17, 17, 17, 1);
  font-weight: bold;
  margin: 0 auto 20rpx;
  justify-content: center;
  box-sizing: border-box;
  padding: 40rpx 0;
  align-items: center;
}

.lieZi view > .pz_eg .little_left {
  width: 70rpx;
  height: 40rpx;
}

.lieZi view > .pz_eg .little_right {
  width: 70rpx;
  height: 40rpx;
}

.img_box {
  box-sizing: border-box;
  padding: 0 30rpx;
  border-radius: 20rpx;
  overflow: hidden;

  image {
    margin-bottom: 20rpx;
  }
}

.lieZi view > .pz_eg text {
  margin: 0 10rpx;
}

.lieZi view image {
  width: 100%;
  height: 470rpx;
}

.lieZi > view {
  margin-top: 10rpx;
}
</style>
